﻿body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI',Tahoma;
    background-color: #000;
}

.page {
    min-height: 840px;
    margin: 0px auto;
    position: relative;
}

.slider {
    height: 100%;
    width: 100%;
    position: absolute;
    background-size: 100% auto;
    z-index:0;
}

#slideshow {
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    width:100%;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}
.nav {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    right: 0px;
    width: 480px;
    height: 100%;
    background: url('../images/bg/head-bg.png') no-repeat;
}

    .nav .nav-item {
        cursor: pointer;
        position: absolute;
        display: table;
        -webkit-transition: background 250ms linear;
        color: white;
        font-weight: bold;
        text-transform: uppercase;
    }

        .nav .nav-item a {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .nav .nav-item.item0 {
            width: 227px;
            height: 206px;
            top: 30px;
            right: 163px;
            background: url('../images/bg/head0.png') no-repeat;
        }

        .nav .nav-item.item1 {
            width: 146px;
            height: 145px;
            top: 242px;
            right: 62px;
            background: url('../images/bg/head1.png') no-repeat;
        }

        .nav .nav-item.item2 {
            width: 146px;
            height: 145px;
            top: 262px;
            right: 275px;
            background: url('../images/bg/head2.png') no-repeat;
        }

        .nav .nav-item.item3 {
            width: 136px;
            height: 137px;
            top: 414px;
            right: 172px;
            background: url('../images/bg/head3.png') no-repeat;
        }

        .nav .nav-item.item4 {
            width: 117px;
            height: 117px;
            top: 493px;
            right: 86px;
            background: url('../images/bg/head4.png') no-repeat;
        }

        .nav .nav-item.item5 {
            width: 131px;
            height: 134px;
            top: 614px;
            right: 208px;
            background: url('../images/bg/head5.png') no-repeat;
        }

        .nav .nav-item.item6 {
            width: 173px;
            height: 140px;
            top: 0px;
            right: 0px;
            background:url('../images/bg/head6-text.png') no-repeat, url('../images/bg/head6.png') no-repeat;
        }

        .nav .nav-item.item0:hover {
            background: url('../images/bg/head0-focus.png') no-repeat;
        }

        .nav .nav-item.item1:hover {
            background: url('../images/bg/head1-focus.png') no-repeat;
        }

        .nav .nav-item.item2:hover {
            background: url('../images/bg/head2-focus.png') no-repeat;
        }

        .nav .nav-item.item3:hover {
            background: url('../images/bg/head3-focus.png') no-repeat;
        }

        .nav .nav-item.item4:hover {
            background: url('../images/bg/head4-focus.png') no-repeat;
        }

        .nav .nav-item.item5:hover {
            background: url('../images/bg/head5-focus.png') no-repeat;
        }

        .nav .nav-item.item6:hover {
            background:url('../images/bg/head6-text.png') no-repeat, url('../images/bg/head6-focus.png') no-repeat;
        }
